<template>
  <div class="pdmain-banner">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in banners" :key="banner.id"
        ><img :src="banner.imageUrl"
      /></van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        {
          id: 1,
          imageUrl:
            'https://down.paperyy.com/xiaochengxu/static/images/banner-reduction.png'
        },
        {
          id: 2,
          imageUrl:
            'https://down.paperyy.com/xiaochengxu/static/images/banner-meal.png'
        }
      ]
    }
  }
}
</script>

<style scoped>
.pdmain-banner {
  width: 100%;
  height: 0;
  padding-top: 3.5rem;
  position: relative;
}
.van-swipe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.van-swipe__track {
  width: 100%;
}
img {
  width: 100%;
  height: 100%;
}
</style>
